<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>帮助文档</title>
    <style>
        html,body,h3{ padding: 0;}
        .help-content{width: 85%;margin-bottom: 10px; border: #ddd solid 1px;}
        li{ list-style: none; margin: 0; vertical-align: top;}
        ul{ margin: 0; padding: 0;}

        /*这是百科右侧导航代码的样式表*/
        .directory-nav{position: fixed; right:60px; bottom:40px; padding: 12px 0 20px 32px; display: none;}
        .directory-nav li{height: 34px;line-height: 34px;  position: relative;cursor:pointer;}
        .directory-nav li a{}
        .directory-nav .l1{ }
        .directory-nav .l2{ text-indent:0.6em;}
        .directory-nav .l1 a{font-size: 16px;}
        .directory-nav .l2 a{font-size: 14px;}
        .directory-nav,.directory-nav a{ color: #666;}
        .directory-nav .cur a{ color: red;}

        .directory-nav .line{ position: absolute; left:4px; top: 5px; bottom: 5px; z-index: 1; width: 2px; background: #ddd;}
        .directory-nav .c-top,.directory-nav .c-bottom{ position: absolute; left: 0; z-index: 2;
            display: block; width: 10px; height: 10px; font-size: 0; line-height: 0;
            background: url(./images/help/directory-nav.png) no-repeat 0 -69px;
        }
        .directory-nav .c-dot{
            position: absolute; left:-32px; top: 50%; z-index: 2; margin-top: -5px;
            display: block; width: 10px; height: 10px; font-size: 0; line-height: 0;
            background: url(./images/help/directory-nav.png) no-repeat -275px 0;
        }

        .directory-nav .c-top{ top: 0}
        .directory-nav .c-bottom{ bottom: 0}
        .directory-nav .cur-tag{
            position: absolute; left: -1px; top:30px; z-index: 5; margin-top: -6px;
            display: block; width: 19px; height: 13px; font-size: 0; line-height: 0;
            background: url(./images/help/directory-nav.png) no-repeat -271px -37px;
            -webkit-transition:top .3s ease 0s;
            transition:top .3s ease 0s;
        }

    </style>
</head>
<body style="padding: 40px;">
 <script type="text/javascript">
		window.onload = function(){
			var config = {
				vx: 4,
				vy:  4,
				height: 2,
				width: 2,
				count: 100,
				color: "121, 162, 185",
				stroke: "100,200,180",
				dist: 6000,
				e_dist: 20000,
				max_conn: 10
			}
			CanvasParticle(config);
		}
	</script>
	<script type="text/javascript" src="./statics/canvas-particle/canvas-particle.js"></script> 
<h1>帮助文档</h1>
<h2>素材库</h2>
	<label>素材库，帮助我们把需要使用的资源提前传到服务器，方便统一管理和复用！</label>
	<h3>图片库</h3>
	<div class="help-content">
	<p>图片库，针对系统使用图片的图片上传前置，上传完毕后可通过复制功能，把图片链接复制到需要填写图片地址的地方。</p>
	<p>添加图片</p>
	<img width='452' height='480' src='./images/help/addImg.jpg' />
	<p>图片复制</p>
	<img width=95% height='267' src='./images/help/copyImg.jpg' />
	
	<p><font color="red">小技巧：</font></p>
	<p>如果连续使用图片库的频率大于2次，建议通过浏览器单独打开一个窗口查看图片库！</p>
	</div>
<h2>消息中心</h2>
    <h3>消息类型</h3>
    <div class="help-content">
    <p>通过管理员分配的账号首次登录时时没有消息类型的，需要您自行建立，并且消息类型建立完毕后需要告知接入消息方和展现消息方对新类型进行支持！</p>
   <p>添加消息类型</p>
   <img width='603'height='389' src='./images/help/messageTypeAdd.jpg' />
   
    </div>
    <h3>新建消息</h3>
    <div class="help-content">
    <p> 主要功能新建、修改新建状态的消息。消息列表中只能看到消息状态为新建和失效的消息</p>
    <p>在添加编辑消息时请注意不同下拉选项所需要填写的信息的差异性。</p>
    <p>添加消息</p>
    <img width='421'height='591' src='./images/help/messageAdd1.jpg' />
    <img width='418'height='597' src='./images/help/messageAdd2.jpg' />
    <img width='522'height='389' src='./images/help/messageAdd3.jpg' />
    <p>确定：新建和修改的消息保存</p>
    <p>提交审核：只有失效的消息才显示这个按钮,保存并提交审核</p>
    <p>返回：返回到消息列表</p>
    </div>
    <h3>消息记录</h3>
    <div class="help-content">
    <p>不管全员消息还是定向消息，用户是否已读的记录表，管理员可用根据条件进行简单统计！</p>
    </div>
    <h3>消息管理</h3>
    <div class="help-content">
    <p>通过「新建消息」新增消息后，需要通过审查功能预览确认消息，然后提交审核。待审核通过后在进行发布操作。消息列表中只能看到消息状态为新建、审核通过、已发布的消息。</p>
    <img width='443'height='454' src='./images/help/shtg.jpg' />
    <p>提交审核：消息状态变成待审核等待审核人员进行消息审核</p>
    <p>发布：只有审核通过的消息才可以成功发布</p>
    <p>失效：消息流转到新建消息中可进行修改</p>
    <p>返回：返回到消息列表</p>
    </div>
     <h3>消息审核</h3>
    <div class="help-content">
    <p>此菜单需要有审核权限的用户才可见，用于待发送消息审核。消息列表中只能看到消息状态为待审核、已发布的消息。</p>
    <img width='448'height='433' src='./images/help/kyfb.jpg' />
    <p>审核通过：消息状态变成审核通过</p>
    <p>失效：消息流转到新建消息中可进行修改</p>
    <p>返回：返回到消息列表</p>
    </div>
    <h2>手机端显示消息规则</h2>
    <h3>消息中心列表</h3>
    <div class="help-content">
    <p>只显示消息类型中有消息的消息类型</p>
    </div>
    <h3>消息列表</h3>
    <div class="help-content">
    <p>消息状态是在发布状态的，展示时间在当前时间之前，过期时间在当前时间之后，和一些符合自己查看的要求的条件。</p>
    </div>


<script type="text/javascript" src="./statics/libs/jquery.min.js"></script>
<script type="text/javascript">
    /*
    * js代码 http://www.jsdaima.com/
    * 仿百度百科右侧导航代码 - 页面目录结构导航 v0.01
    * 只写了两级，无限级别也可以，是逻辑上的级别，html结构全是同一级别
    * 滑标动画用的css3过渡动画，不支持的浏览器就没动画效果了
    * 和百度百科比起来还是比较弱，没有实现右边也可以滚动的功能
    */
    function DirectoryNav($h,config){
        this.opts = $.extend(true,{
            scrollThreshold:0.5,    //滚动检测阀值 0.5在浏览器窗口中间部位
            scrollSpeed:700,        //滚动到指定位置的动画时间
            scrollTopBorder:500,    //滚动条距离顶部多少的时候显示导航，如果为0，则一直显示
            easing: 'swing',        //不解释
            delayDetection:200,     //延时检测，避免滚动的时候检测过于频繁
            scrollChange:function(){}
        },config);
        this.$win = $(window);
        this.$h = $h;
        this.$pageNavList = "";
        this.$pageNavListLis ="";
        this.$curTag = "";
        this.$pageNavListLiH = "";
        this.offArr = [];
        this.curIndex = 0;
        this.scrollIng = false;
        this.init();
    }

    DirectoryNav.prototype = {
        init:function(){
            this.make();
            this.setArr();
            this.bindEvent();
        },
        make:function(){
            //生成导航目录结构,这是根据需求自己生成的。如果你直接在页面中输出一个结构那也挺好不用 搞js
            $("body").append('<div class="directory-nav" id="directoryNav"><ul></ul><span class="cur-tag"></span><span class="c-top"></span><span class="c-bottom"></span><span class="line"></span></div>');
            var $hs = this.$h,
                $directoryNav = $("#directoryNav"),
                temp = [],
                index1 = 0,
                index2 = 0;
            $hs.each(function(index){
                var $this = $(this),
                        text = $this.text();
                if(this.tagName.toLowerCase()=='h2'){
                    index1++;
                    if(index1%2==0) index2 = 0;
                    temp.push('<li class="l1"><span class="c-dot"></span>'+index1+'. <a class="l1-text">'+text+'</a></li>');
                }else{
                    index2++;
                    temp.push('<li class="l2">'+index1+'.'+index2+' <a class="l2-text">'+text+'</a></li>');

                }
            });
            $directoryNav.find("ul").html(temp.join(""));

            //设置变量
            this.$pageNavList = $directoryNav;
            this.$pageNavListLis = this.$pageNavList.find("li");
            this.$curTag = this.$pageNavList.find(".cur-tag");
            this.$pageNavListLiH = this.$pageNavListLis.eq(0).height();

            if(!this.opts.scrollTopBorder){
                this.$pageNavList.show();
            }
        },
        setArr:function(){
            var This = this;
            this.$h.each(function(){
                var $this = $(this),
                    offT = Math.round($this.offset().top);
                This.offArr.push(offT);
            });
        },
        posTag:function(top){
            this.$curTag.css({top:top+'px'});
        },
        ifPos:function(st){
            var offArr = this.offArr;
            //console.log(st);
            var windowHeight = Math.round(this.$win.height() * this.opts.scrollThreshold);
            for(var i=0;i<offArr.length;i++){
                if((offArr[i] - windowHeight) < st) {
                    var $curLi = this.$pageNavListLis.eq(i),
                        tagTop = $curLi.position().top;
                    $curLi.addClass("cur").siblings("li").removeClass("cur");
                    this.curIndex = i;
                    this.posTag(tagTop+this.$pageNavListLiH*0.5);
                    //this.curIndex = this.$pageNavListLis.filter(".cur").index();
                    this.opts.scrollChange.call(this);
                }
            }
        },
        bindEvent:function(){
            var This = this,
                show = false,
                timer = 0;
            this.$win.on("scroll",function(){
                var $this = $(this);
                clearTimeout(timer);
                timer = setTimeout(function(){
                    This.scrollIng = true;
                    if($this.scrollTop()>This.opts.scrollTopBorder){
                        if(!This.$pageNavListLiH) This.$pageNavListLiH = This.$pageNavListLis.eq(0).height();
                        if(!show){
                            This.$pageNavList.fadeIn();
                            show = true;
                        }
                        This.ifPos( $(this).scrollTop() );
                    }else{
                        if(show){
                            This.$pageNavList.fadeOut();
                            show = false;
                        }
                    }
                },This.opts.delayDetection);
            });

            this.$pageNavList.on("click","li",function(){
                var $this = $(this),
                    index = $this.index();
                This.scrollTo(This.offArr[index]);
            })
        },
        scrollTo: function(offset,callback) {
            var This = this;
            $('html,body').animate({
                scrollTop: offset
            }, this.opts.scrollSpeed, this.opts.easing, function(){
                This.scrollIng = false;
                //修正弹两次回调 蛋疼
                callback && this.tagName.toLowerCase()=='body' && callback();
            });
        }
    };

    //实例化
    var directoryNav = new DirectoryNav($("h2,h3"),{
        scrollTopBorder:0   //滚动条距离顶部多少的时候显示导航，如果为0，则一直显示
    });

</script>
<script type="text/javascript">
function stopss(){
   return false;
}
document.oncontextmenu=stopss;
</script>
</body>
</html> 